<template>
  <div class="home-slide" :class="{ fold: isSlideFold }">
    <!-- <img
      class="header-img"
      src="../../assets/images/home/slide-top-img.png"
      alt=""
    /> -->
    <div class="slide-content">
      <div class="person-info">
        <div class="person-img">
          <img src="../../assets/images/home/user-img.png" alt="" />
        </div>
        <div class="person-content" v-if="userInfo">
          <p class="name" :title="userInfo.userName">{{ userInfo.userName }}</p>
          <p class="info">{{ userInfo.loginPostInfo.orgName }}</p>
        </div>
      </div>
      <div class="orgs">
        <div class="org-top">
          <div class="org-title">组织架构</div>
          <div class="org-search">
            <el-input
              placeholder="请输入组织机构/人员"
              maxlength="50"
              size="small"
              prefix-icon="el-icon-search"
              clearable
              v-model="orgKeyword"
              @change="onOrgSearch"></el-input>
          </div>
        </div>
        <el-scrollbar class="org-tree">
          <el-tree
            ref="tree"
            :data="orgTreeData"
            :props="defaultProps"
            node-key="id"
            :default-expanded-keys="openeds"
            :filter-node-method="filterNode">
            <template #default="{ node, data }">
              <span
                class="custom-tree-node"
                @mouseenter="treeHover(node, data, $event)"
                @mouseleave="mouseLeave"
                :title="(!data.userName && node.label) || ''">
                {{ node.label }}
              </span>
            </template>
          </el-tree>
        </el-scrollbar>

        <!-- 名片展开 -->
        <div class="person-card" ref="personCard" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
          <div class="card-top">
            <div class="top-head">
              <img src="../../assets/images/home/user-img.png" alt="" />
            </div>
            <div class="top-info">
              <div class="name-div">
                <span class="name-span">{{ personInfo.userName }}</span>
                <span>{{ personInfo.post }}</span>
              </div>
              <div>{{ personInfo.remark }}</div>
            </div>
          </div>
          <div class="card-bottom">
            <div>
              <i class="iconfont icon-dianhuatianchong"></i>
              {{ personInfo.phone }}
            </div>
            <div>
              <i class="iconfont icon-youjian"></i>
              {{ personInfo.email }}
            </div>
          </div>
        </div>
      </div>
      <div class="xn-apps">
        <div class="app-title">
          <span>管理应用</span>
        </div>
        <el-scrollbar class="app-box">
          <div class="app-container">
            <div class="app-item-view" v-for="(item, key) in appDisplay" :key="key">
              <div class="app-item" :class="{ actived: activedNav === item.name }" @click="onNavItemClick(item)">
                <div class="app-icon">
                  <img :src="item.img" alt="" />
                </div>
                <div class="app-name">{{ item.label }}</div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="slide-fold">
      <div class="fold-title"><span>效能管理</span></div>
      <el-scrollbar class="app-list">
        <div class="app-container">
          <div
            class="app-item"
            :class="{ actived: activedNav === item.name }"
            v-for="(item, key) in appDisplay"
            :key="key"
            @click="onNavItemClick(item)">
            <div class="app-icon">
              <img :src="item.img" alt="" />
            </div>
            <div class="app-name">{{ item.label }}</div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="fold-btn" @click="changeFoldSatus">
      <i class="el-icon-arrow-left"></i>
    </div>
  </div>
</template>

<script>
import { getOrgList } from '@api/api.js'
import { mapGetters } from 'vuex'

export default {
  name: 'homeSlide',
  data() {
    return {
      orgTreeData: [],
      defaultProps: {
        children: 'childrenList',
        label: 'label',
      },
      openeds: ['juUnit'],
      personInfo: '',
      activedNav: '',
      appList: {
        zzjg: {
          name: 'organManage',
          label: '组织架构管理',
          showPath: true,
          img: require('../../assets/images/home/nav-icon-task.png'),
        },
        jbzd: {
          name: 'basicSystem',
          label: '基本制度',
          showPath: true,
          img: require('../../assets/images/home/nav-icon-cms.png'),
        },
        xfsf: {
          name: 'vanDemonstrate',
          label: '先锋示范',
          showPath: true,
          img: require('../../assets/images/home/nav-icon-inspection.png'),
        },

        mcaf: {
          name: 'task',
          label: '效能监督',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-task.png'),
        },
        problem: {
          name: 'problemCenter',
          label: '问题整改',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-trouble.png'),
        },
        complaint: {
          name: 'complaint',
          label: '效能投诉',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-complaint.png'),
        },
        complaintCreate: {
          name: 'complaintCreate',
          label: '增加投诉',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-task.png'),
        },
        bbcs: {
          name: 'bbcs',
          label: '“办不成事”',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-complaint.png'),
        },
        bbcsCreate: {
          name: 'bbcsCreate',
          label: '增加问题',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-task.png'),
        },
        indicationManage: {
          name: 'indicationManage',
          label: '上报管理',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-report.png'),
        },
        indicationPush: {
          name: 'indicationPush',
          label: '上报管理',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-report.png'),
        },
        cms: {
          name: 'cmsManage',
          label: '内容管理',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-cms.png'),
        },
        attendance: {
          name: 'attendanceManager',
          label: '值班管理',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-attendance.png'),
        },
        // evaluate: {
        //   name: 'evaluate',
        //   label: '考核评价',
        //   showPath: false,
        //   img: require('../../assets/images/home/nav-icon-evaluate.png'),
        // },
        zxdcManage: {
          name: 'inspectionManage',
          label: '专项督查',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-inspection.png'),
        },
        zxdcAduit: {
          name: 'inspectionAudit',
          label: '专项督查',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-inspection.png'),
        },
        award: {
          name: 'award',
          label: '表彰推广',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-bztg.png'),
        },
        dbRes: {
          name: 'dbRes',
          label: '信息资源库',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-db-res.png'),
        },
        supervisor: {
          name: 'supervisor',
          label: '监督员管理',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-inspector.png'),
        },
        orgSupport: {
          name: 'orgSupport',
          label: '决策支持',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-report-paper.png'),
        },
        notice: {
          name: 'cmsList',
          label: '通知公告',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-notice.png'),
          params: {
            articleType: 'GGTZ',
          },
        },
        indMainTask: {
          name: 'indicationMain',
          label: '重点任务',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-zdrw.png'),
        },
        linkage: {
          name: 'linkage',
          label: '工作联动',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-linkage.png'),
        },
        questionary: {
          name: 'questionary',
          label: '民意互动',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-questionary.png'),
        },
        model: {
          path: location.origin + '/model-manager/index.html#/target',
          label: '模型平台',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-model.png'),
        },
        auth: {
          path: location.origin + '/uias/index.html',
          label: '权限管理',
          showPath: false,
          img: require('../../assets/images/home/nav-icon-auth.png'),
        },
      },
      orgKeyword: '',
    }
  },
  computed: {
    appDisplay() {
      const displayObj = {}
      for (const key in this.appList) {
        const element = this.appList[key]
        if (element.showPath) {
          displayObj[key] = element
        }
      }
      return displayObj
    },
    ...mapGetters([
      'userRoles',
      'userInfo',
      'isSlideFold',
      'isCityRole',
      'isWindowRole',
      'isBbcsWindowRole',
      'isBbcsWindowCityRole',
      'isBbcsWindowCountyRole',
      'isInspectorRole',
      'isManageRole',
      'isLeaderRole',
      'isProvinceRole',
      'isIndCheckRole',
      'enableBbcs',
    ]),
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(val) {
        this.activedNav = val.name
      },
    },
    userRoles: {
      immediate: true,
      handler() {
        // this.initMenus()
      },
    },
  },
  created() {
    this.getOrgList()
  },
  methods: {
    initMenus() {
      const {
        mcaf,
        complaint,
        complaintCreate,
        bbcs,
        bbcsCreate,
        indicationManage,
        cms,
        attendance,
        // evaluate,
        zxdcManage,
        zxdcAduit,
        award,
        dbRes,
        supervisor,
        orgSupport,
        notice,
        indMainTask,
        linkage,
        questionary,
        model,
        auth,
      } = this.appList

      mcaf.showPath = false
      complaint.showPath = false
      complaintCreate.showPath = false
      bbcs.showPath = false
      bbcsCreate.showPath = false
      indicationManage.showPath = false
      cms.showPath = false
      attendance.showPath = false
      // evaluate.showPath = false
      zxdcManage.showPath = false
      zxdcAduit.showPath = false
      award.showPath = false
      dbRes.showPath = false
      supervisor.showPath = false
      orgSupport.showPath = false
      notice.showPath = false
      indMainTask.showPath = false
      linkage.showPath = false
      questionary.showPath = false
      model.showPath = false
      auth.showPath = false

      if (this.isIndCheckRole) {
        indicationManage.showPath = true
      }

      if (this.isWindowRole) {
        complaint.showPath = true
        complaintCreate.showPath = true
      }
      if (this.enableBbcs && this.isBbcsWindowRole) {
        bbcs.showPath = true
        bbcsCreate.showPath = true
      }
      if (this.enableBbcs && this.isBbcsWindowCityRole) {
        bbcs.showPath = true
        bbcsCreate.showPath = true
      }
      if (this.enableBbcs && this.isBbcsWindowCountyRole) {
        bbcs.showPath = true
        bbcsCreate.showPath = true
      }
      if (this.isProvinceRole) {
        award.showPath = true
        orgSupport.showPath = true
        notice.showPath = true
        linkage.showPath = true
      }
      if (this.isCityRole) {
        linkage.showPath = true
        // notice.showPath = true
      }
      if (this.isInspectorRole) {
        zxdcAduit.showPath = true
      }
      if (this.isManageRole) {
        mcaf.showPath = true
        indicationManage.showPath = true
        complaint.showPath = true
        if (this.enableBbcs) {
          bbcs.showPath = true
        }
        cms.showPath = true
        attendance.showPath = true
        zxdcManage.showPath = true
        award.showPath = true
        dbRes.showPath = true
        supervisor.showPath = true
        indMainTask.showPath = true
        linkage.showPath = true
        questionary.showPath = true
        zxdcAduit.showPath = false
        model.showPath = true
        auth.showPath = true
      }
      if (this.isLeaderRole) {
        mcaf.showPath = true
        indicationManage.showPath = true
        complaint.showPath = true
        cms.showPath = true
        attendance.showPath = true
        // evaluate.showPath = true
        zxdcManage.showPath = true
        award.showPath = true
        indMainTask.showPath = true
        linkage.showPath = true
        zxdcAduit.showPath = false
      }
    },
    getOrgList() {
      getOrgList().then(res => {
        if (res.status === 200) {
          const data = res.data
          this.orgTreeData = this.buildOrgTreeData(data)
        }
      })
    },
    buildOrgTreeData(list) {
      list.forEach(item => {
        const { childrenList, userName, orgName } = item
        item.label = orgName
        if (childrenList && childrenList.length > 0) {
          this.buildOrgTreeData(childrenList)
        } else if (userName) {
          item.label = userName
        }
      })
      return list
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 名片隐藏，关闭
    onCloseCarte() {
      this.$refs.personCard.style.opacity = '0'
      this.$refs.personCard.style.zIndex = '-1'
    },
    // 名片展示
    onShowCarte() {
      this.$refs.personCard.style.opacity = '1'
      this.$refs.personCard.style.zIndex = '9'
    },
    // 鼠标进入名片
    mouseEnter() {
      this.onShowCarte()
    },
    // 鼠标移出名片
    mouseLeave() {
      this.onCloseCarte()
    },
    treeHover(node, data, e) {
      if (data.childrens && data.childrens.length > 0 && !data.userBookVO) return
      if (!data.userBookVO && !data.userName) return
      if (data.userBookVO) {
        this.personInfo = data.userBookVO
      } else {
        this.personInfo = data
      }
      const size = e.target.getBoundingClientRect()
      this.$refs.personCard.style.top = size.top - 28 + 'px'
      this.$refs.personCard.style.left = size.width + size.left + 10 + 'px'
      this.onShowCarte()
    },
    onNavItemClick(item) {
      if (item.name) {
        this.$router.push({ name: item.name, params: item.params })
      } else if (item.path) {
        window.open(item.path)
      }
    },
    onOrgSearch() {
      this.$refs.tree.filter(this.orgKeyword)
    },
    changeFoldSatus() {
      this.$store.commit('setSlideFold', !this.isSlideFold)
    },
  },
}
</script>

<style lang="scss">
.home-slide {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: 0.3s;
  padding-bottom: 10px;
  .slide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0px 31px 0px 20px;
    background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.37) 100%);
    box-shadow: 0px 2px 10px 1px rgba(116, 116, 116, 0.47);

    .el-tree-node:focus > .el-tree-node__content {
      background-color: rgba($color: #f1c28b, $alpha: 0.2);
    }

    .el-tree-node__content:hover {
      background-color: rgba($color: #f1c28b, $alpha: 0.2);
    }

    .person-info {
      background: linear-gradient(0deg, #bb8a50, #e4b072);
      padding: 15px;
      display: flex;
      border-bottom: 1px solid #4f3434;
      .person-img {
        height: 62px;
        width: 62px;
        img {
          width: 100%;
        }
      }
      .person-content {
        flex: 1;
        color: #fff;
        padding: 0 20px;
        margin-top: 8px;
        font-size: 18px;
        overflow: hidden;
        color: #ffffff;
        text-shadow: 0px 2px 7px rgba(161, 133, 90, 0.41);
        letter-spacing: 2px;
        .name {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .info {
          font-size: 14px;
          margin-top: 5px;
          color: #ffffff;
          text-shadow: 0px 2px 7px rgba(161, 133, 90, 0.41);
          letter-spacing: 2px;
        }
      }
    }
    .orgs {
      flex: 1;
      margin: 0 15px;
      position: relative;
      .org-top {
        display: flex;
        align-items: center;
        padding: 10px 0;
        .org-title {
          font-size: 18px;
          margin-right: 20px;
          font-weight: bold;
        }
        .org-search {
          flex: 1;
        }
        border-bottom: 1px solid rgba($color: #4f3434, $alpha: 0.16);
      }
      .org-tree {
        margin-top: 20px;
        overflow: hidden;
        position: absolute;
        top: 40px;
        bottom: 0;
        left: 0;
        right: 0;
      }
      .el-tree {
        background: transparent;
      }
      .el-tree-node {
        padding: 2px 0;
      }
      .el-tree-node__expand-icon {
        color: #bb8a50;
        vertical-align: middle;
      }
      .el-tree-node__expand-icon.is-leaf {
        color: transparent;
      }
      .custom-tree-node {
        font-size: 16px;
        line-height: 24px;
        vertical-align: middle;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .person-card {
        position: fixed;
        left: 348px;
        top: -140px;
        z-index: -1;
        border: 1px solid #e5e5e5;
        background-color: #ffffff;
        // transition: all 0.1s;
        // -webkit-transition: all 0.1s;
        height: 140px;
        opacity: 0;
        border-radius: 4px;
        box-shadow: 0px 9px 15px 0px rgba(108, 108, 108, 0.3);
        color: #333;
        box-sizing: border-box;
        .card-top {
          display: flex;
          align-items: stretch;
          padding: 20px 20px;
          .top-head {
            width: 55px;
            height: 55px;
            margin-right: 20px;
            img {
              width: 100%;
            }
          }
          .top-info {
            color: #888888;
            line-height: 18px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name-div {
              line-height: 18px;
              display: flex;
              align-items: center;
              .name-span {
                font-size: 18px;
                color: #333;
                font-weight: 600;
                padding-right: 20px;
              }
              span:last-child {
                padding-left: 20px;
                border-left: 1px solid #bfbfbf;
              }
            }
          }
        }
        .card-bottom {
          background-color: #f0f0f0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 20px;
          height: 43px;
          border-radius: 0 0 4px 4px;
          .iconfont {
            color: #bbbbbb;
            font-size: 16px;
            margin-right: 10px;
          }
          div:first-child {
            margin-right: 30px;
          }
        }
        .close {
          position: absolute;
          right: 8px;
          top: 8px;
          font-size: 20px;
          text-align: right;
        }
      }
      .person-card::before {
        content: '';
        position: absolute;
        left: -10px;
        top: 25px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 10px solid #fff;
        border-bottom: 10px solid transparent;
      }
    }
    .xn-apps {
      margin-top: 15px;
      border-top: 1px solid rgba($color: #4f3434, $alpha: 0.16);
      height: 40%;
      max-height: 340px;
      min-height: 160px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .app-title {
        font-size: 18px;
        padding: 15px 15px 5px 15px;
        font-weight: bold;
      }
      .app-box {
        flex: 1;
      }
      .app-container {
        padding: 0 10px 10px;
        // display: grid;
        // grid-template-columns: 1fr 1fr 1fr;
        // grid-column-gap: 20px;
        // grid-row-gap: 20px;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
      }
      .app-item-view {
        width: 33.3%;
        height: 95px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .app-item {
        background: #fff;
        height: 84px;
        width: 84px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 3px 5px 7px 1px rgba(124, 102, 74, 0.2);
        border-radius: 3px;
        padding: 5px 0;
        // margin-bottom: 20px;
        &.actived {
          background: #fff7ed;
        }
        &:hover {
          background: #fff7ed;
        }
        .app-icon {
          flex: 1;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .slide-fold {
    display: none;
  }

  .fold-btn {
    position: absolute;
    right: 17px;
    top: 130px;
    width: 14px;
    height: 60px;
    background: #b02020;
    box-shadow: 3px 0px 7px 1px rgba(0, 0, 0, 0.32);
    border-radius: 0px 13px 13px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    &:hover {
      background: rgba($color: #b02020, $alpha: 0.85);
    }
    i {
      color: #fff;
      font-size: 18px;
      transition: 0.6s;
    }
  }

  &.fold {
    width: 140px;
    transition: 0.3s;
    // .header-img {
    //   display: none;
    // }
    .slide-content {
      display: none;
    }
    .slide-fold {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      margin: 0px 32px 0px 0px;
      background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.37) 100%);
      box-shadow: 0px 2px 10px 1px rgba(116, 116, 116, 0.47);
      display: inherit;
      padding-bottom: 2px;

      .fold-title {
        background: linear-gradient(0deg, #bb8a50, #e4b072);
        height: 59px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-size: 18px;
          font-weight: bold;
          color: #ffffff;
          line-height: 20px;
          text-shadow: 0px 2px 7px rgba(161, 133, 90, 0.41);
        }
      }
      .app-list {
        flex: 1;
        .app-container {
          text-align: center;
          .app-item {
            width: 84px;
            height: 84px;
            margin: 20px auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 3px;
            padding: 5px 0;
            cursor: pointer;
            &:hover {
              background: #fff7ed;
              box-shadow: 3px 5px 7px 1px rgba(124, 102, 74, 0.2);
            }

            &.actived {
              background: #fff7ed;
              box-shadow: 3px 5px 7px 1px rgba(124, 102, 74, 0.2);
            }
          }
        }
      }
    }
    .fold-btn {
      right: 18px;
      i {
        transform: rotate(180deg);
      }
    }
  }
  @media screen and(max-width:1400px) {
    // .header-img {
    //   width: 325px;
    // }

    .slide-content {
      margin: 0px 32px 0px 10px;

      .person-info {
        padding: 12px;

        .person-content {
          margin-top: 4px;
          padding: 0 15px;
        }
      }
      .orgs {
        margin: 0 10px;
        .org-top {
          .org-title {
            margin-right: 12px;
          }
        }
      }
      .xn-apps {
        max-height: 325px;
        .app-title {
          padding: 15px 10px 5px 10px;
        }
        .app-container {
          padding: 0 8px 5px 8px;
          // grid-column-gap: 15px;
          // grid-row-gap: 15px;
        }
      }
    }

    .fold-btn {
      width: 12px;
      right: 20px;
      i {
        font-size: 16px;
      }
    }

    &.fold {
      width: 130px;
      .slide-fold {
        margin: 0px 32px 0px 0px;
        .app-list {
          .app-container {
            .app-item {
              margin: 15px auto;
            }
          }
        }
      }

      .fold-btn {
        right: 20px;
      }
    }
  }
}
</style>
